<template>
  <div>
    <el-dialog
      :title="flowDetailInfo?flowDetailInfo.title:''"
      :visible.sync="flag"
      @close='close'
      width="50%"
      center>
      <div style="min-height: 400px;">
        <el-timeline v-if="flowDetailInfo">
            <el-timeline-item
              v-for="(item, index) in flowDetailInfo.children"
              :key="index"
              :timestamp="item.flag?item.timestamp:''"
              :color='item.flag?"#409eff":""'
              >
              <el-card v-if="isMyProject">
                <h4>审批人{{index+1}}</h4>
                <p >{{item.content}}
                <span style="margin-left: 20px;">状态：</span>
                  <span v-if="item.flag">审批于 {{item.timestamp}}</span>
                  <span v-else>未审批</span>
                </p>
                <div v-if="item.history.length>0">
                  <!-- <span style="color: #F56C6C;display: block;" >{{index+1}}.{{repulse.opinion}}</span> -->
                  <el-collapse>
                    <el-collapse-item title="打回记录" :name="index">
                      <div  v-for="(repulse,index) in item.history" style="margin-bottom: 5px;">{{repulse.opinion}}
                      <span style="margin-left: 20px;">{{repulse.timestamp}}</span>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-card>
              <el-card v-else>
                <h4>{{item.title}}</h4>
                <p>
                  <div style="margin-bottom: 10px;display: block;" v-for="items in item.list">{{items}}</div>
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <div style="width: 100%;height: 100%;text-align: center;line-height: 350px;" v-else>还没创建流程~</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:'flowDetails',
    data(){
      return {
        flag:this.flowDialog
      }
    },
    props:['flowDialog','flowDetailInfo','isMyProject'],
    methods:{
      close(){
        this.$emit('close')
      }
    },
    mounted(){
      console.log(this.flag)
      console.log(this.flowDialog)
    }
  }
</script>

<style>
</style>
